<template>
  <div>
  <div class="shopcart">
    <div class="content">
      <div class="content-left">
        <div class="logo-wrapper" @click="toggleCarList()">
          <div class="logo " :class="{highlight:totalCount}">
            <i class="iconfont iconsousuo " :class="{highlight:totalCount}"></i>
          </div>
          <div class="num" v-if="totalCount">{{totalCount}}</div>
        </div>
        <div class="price " :class="{highlight:totalCount}">￥{{totalPrice}}</div>
        <div class="desc">另需配送费￥{{shopSeller.deliveryPrice}} 元</div>
      </div>
      <div class="content-right">
        <div class="pay " :class="payClass">
          <!--还差￥10 元起送-->
          {{payText}}
        </div>
      </div>
    </div>

    <transition name="move">
      <div class="shopcart-list" v-show="isshowList">
        <div class="list-header">
          <h1 class="title">购物车</h1>
          <span class="empty" @click="clear">清空</span>
        </div>
        <div class="list-content" id="listContent">
          <ul >
            <li class="food" v-for="(food, index) in shopCar" :key="index">
              <span class="name">{{food.name}}</span>
              <div class="price"><span >￥{{food.price}}</span></div>
              <div class="cartcontrol-wrapper">
                <CartControl :food="food"/>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
    <transition name="fade">
      <div class="list-mask" v-show="isshowList" @click="toggleCarList"></div>
    </transition>
  </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    import CartControl from '../../components/cartControl/cartControl'

    import Bscroll from 'better-scroll'
    import {MessageBox} from 'mint-ui'
    export default {
        name: "ShopCar",
        data(){
          return {
            listShow:false
          }
        },
        computed :{
          ...mapState(['shopCar','shopSeller']),
          ...mapGetters(['totalCount','totalPrice']),
          /*
          支付class有2中 一种是 not-enough 另一种是enough
          paytext 支付的文本 有三种
          一种是 0元 的时候显示 需要支付20元
          另一种是非0元 小于最小起送价 显示 还需要XX元
          第三种是满足条件  显示 支付
           */
          payClass(){
            let {totalPrice} =this
            let {minPrice} = this.shopSeller

            if(totalPrice>=minPrice){
              return 'enough';
            }else{
              return 'not-enough'
            }
          },
          payText () {
            let {totalPrice} =this
            let {minPrice} = this.shopSeller

            if(totalPrice==0){
              return `需要支付${minPrice}元`;
            }else if(totalPrice<minPrice){
              let result=minPrice-totalPrice;
              return `还需要支付${result}元`
            }else{
              return '立即支付'
            }
          },
          /*
          计算属性 控制购物车list的出现和隐藏
          如果购物车没东西 直接返回 false  并且重置 listShow为false
          如果有东西 就返回listshow的当前状态 （true或者false)
          */
          isshowList(){
            if(this.totalCount==0){
              this.listShow=false
              return false
            }

            if(this.listShow){
              //要加上这个  数据渲染完成后
              this.$nextTick(()=>{
                // 要保证单例 ，要不然betterscroll发送的点击事件 会很多
                if(!this.scroll){
                  this.scroll=new Bscroll('.list-content',{
                    click:true
                  })
                }else{
                  //解决如果第一次选的少 创建了scroll ，再选得多后。第一次不滑动的问题
                  //让这个滚动范围 重新计算高度 看看是否需要滑动
                  this.scroll.refresh();
                }
              })
            }

            return this.listShow
          }
        },
      /*watch:{
        shopCar:function (value) {
          if(this.shopCar.length==0){
            this.listShow=!this.listShow;
          }
        }
      },*/
        methods:{
          // 切换购物车list 是否显示
          toggleCarList (){
            if(this.totalCount>0){
              this.listShow=!this.listShow;
            }
          },
          clear(){
            MessageBox.confirm(' 确定清空购物车吗？').then(
              action=>{ //成功的
                this.$store.dispatch('clearShopCar',()=>{
                  this.$nextTick(() => {
                    this.listShow=false;
                  })
                });
              },
              ()=>{ //失败的

              }
            )
          }
        },
        components:{
          CartControl
        }

    }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .shopcart
    position fixed
    left 0
    bottom 0
    z-index 50
    width 100%
    height 48px
    .content
      display flex
      background #141d27
      font-size 0
      color rgba(255, 255, 255, 0.4)
      .content-left
        flex:1
        .logo-wrapper
          display inline-block
          vertical-align top
          position relative
          top -10px
          margin 0 12px
          padding 6px
          width 56px
          height 56px
          box-sizing border-box
          border-radius 50%
          background #141d27
          .logo
            width 100%
            height 100%
            border-radius 50%
            text-align center
            background #2b343c
            &.highlight
              background $green
              .icon-shopping_cart
                line-height 44px
                font-size 24px
                color #80858a
                &.highlight
                  color #fff
          .num
            position absolute
            top 0
            right 0
            width 24px
            height 16px
            line-height 16px
            text-align center
            border-radius 16px
            font-size 9px
            font-weight 700
            color #ffffff
            background rgb(240, 20, 20)
            box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)
        .price
          display inline-block
          vertical-align top
          margin-top 5px
          line-height 24px
          padding-right 12px
          box-sizing border-box
          font-size 16px
          font-weight 700
          color #fff
          &.highlight
           color #fff
        .desc
          display inline-block
          vertical-align bottom
          margin-bottom 15px
          margin-left -45px
          font-size 10px
      .content-right
        flex 0 0 105px
        width 105px
        .pay
          height 48px
          line-height 48px
          text-align center
          font-size 12px
          font-weight 700
          color #fff
          &.not-enough
           background #2b333b
          &.enough
            background #00b43c
            color #fff
              .ball-container .ball
                  position fixed
                  left 32px
                  bottom 22px
                  z-index 200
                  transition all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
                  .inner
                    width 16px
                    height 16px
                    border-radius 50%
                    background $green
                    transition all 0.4s linear
    .shopcart-list
      position absolute
      left 0
      top 0
      z-index -1
      width 100%
      transform translateY(-100%)
      &.move-enter-active, &.move-leave-active
        transition transform .3s
      &.move-enter, &.move-leave-to
        transform translateY(0)
      .list-header
        height 40px
        line-height 40px
        padding 0 18px
        background #f3f5f7
        border-bottom 1px solid rgba(7, 17, 27, 0.1)
        .title
          float left
          font-size 14px
          color rgb(7, 17, 27)
        .empty
          float right
          font-size 12px
          color rgb(0, 160, 220)
      .list-content
        padding 0 18px
        max-height 217px
        overflow hidden
        background #fff
        .food
          position relative
          padding 12px 0
          box-sizing border-box
          bottom-border-1px(rgba(7, 17, 27, 0.1))
          .name
            line-height 24px
            font-size 14px
            color rgb(7, 17, 27)
          .price
            position absolute
            right 90px
            bottom 12px
            line-height 24px
            font-size 14px
            font-weight 700
            color rgb(240, 20, 20)
          .cartcontrol-wrapper
            position absolute
            right 0
            bottom 6px
  .list-mask
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index 40
    backdrop-filter blur(10px)
    opacity 1
    background rgba(7, 17, 27, 0.6)
    &.fade-enter-active, &.fade-leave-active
      transition all 0.5s
    &.fade-enter, &.fade-leave-to
      opacity 0
      background rgba(7, 17, 27, 0)
</style>
